<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('我的发起')" />
    <style>
        #df{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        #df>div{
            background-color: white;
            width: 28%;
            height: 0;
            padding-bottom: 13%;
            margin: 1% 0;
        }
        #df>div:hover{
            cursor: pointer;
            box-shadow: 1px 1px 1px #DDDDDD;
        }
    </style>
</head>
<body class="gray-bg">
	<div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
				<form id="role-form">
					<div class="select-list">
						<ul>
							<li>
								<p>流程名称：</p>
								<input type="text" name="name"/>
							</li>
							<li class="select-time">
								<p>创建时间：</p>
								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="beginTime"/>
								<span>-</span>
								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="endTime"/>
							</li>
							<li>
								<p>流程实例ID：</p>
								<input type="text" name="processKey"/>
							</li>
							<li>
								<label>状态：</label>
								<select name="status" th:with="type=${@dict.getType('act_complete_type')}">
									<option value="">所有</option>
									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>

			<div class="btn-group-sm" id="toolbar" role="group">
				<!--<a class="btn btn-success" th:onclick="$.modal.open('申请表单', [['/act/add?key='+${key}]])">
	                <i class="fa fa-plus"></i> 发起流程
	            </a>-->
	        </div>
	        
	        <div class="col-sm-12 select-table table-striped">
			    <table id="bootstrap-table"></table>
			</div>
		</div>
	</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
var editFlag = [[${@permission.hasPermi('system:role:edit')}]];
var removeFlag = [[${@permission.hasPermi('system:role:remove')}]];
var typeDatas = [[${@dict.getType('act_complete_type')}]];
var prefix = ctx + "act/processInstance";


$(function() {
    var options = {
        url: prefix + "/getMyInstance",
        createUrl: prefix + "/add",
        updateUrl: prefix + "/edit/{id}",
        removeUrl: prefix + "/remove",
        exportUrl: prefix + "/export",
        modalName: "流程实例列表",
        columns: [{
            checkbox: true
        },
        {
			field : 'id',
			title : '主键ID',
			visible: false
        },
        {
            field: 'processDefinitionName',
            title: '流程名称',
            sortable: true
        },
        {
            field: 'startTime',
            title: '发起时间',
            sortable: true
        },
        {
            field: 'endTime',
            title: '结束时间',
            sortable: true
        },
		{
			field: 'completeType',
			title: '是否完成',
			formatter: function(value, row, index) {
				return $.table.selectDictLabel(typeDatas, value);
			}
		},
        {
            title: '操作',
            align: 'center',
            formatter: function(value, row, index) {
                var actions = [];
				actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="backTask(\'' + row.id + '\')"><i class="fa fa-times"></i> 撤回</a> ');
				actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="deleteInstance(\'' + row.id + '\')"><i class="fa fa-times"></i> 取消</a> ');
				actions.push('<a class="btn btn-warning btn-xs" href="javascript:void(0)" onclick="showHistoryDialog(\'' + row.id + '\')"><i class="fa fa-list"></i> 审批历史</a> ');
				actions.push('<a class="btn btn-info btn-xs" href="javascript:void(0)" onclick="showProcessImgDialog(\'' + row.id + '\')"><i class="fa fa-image"></i> 进度查看</a> ');
                return actions.join('');
            }
        }]
    };
    $.table.init(options);
});

function deleteInstance(instanceId) {
	$.modal.loading("正在取消，请稍后...");

	$.ajax({
		url: "/act/processInstance/deleteInstanceById",
		type: "post",
		data: {"instanceId": instanceId},
		success: function(msg){
			console.log(msg);
			$.table.refresh();
			$.modal.closeLoading();
		},
		error: function(){
			$.modal.closeLoading();
		}
	})
}

function backTask(instanceId) {
	$.modal.loading("正在撤回，请稍后...");

	$.ajax({
		url: "/act/processInstance/backTask",
		type: "post",
		data: {"instanceId": instanceId},
		success: function(msg){
			if(msg.code == 0){
				$.modal.msgSuccess("撤回成功");
			} else {
				$.modal.alertError("撤回失败，请检查流程是否支持撤回或流程是否处于可撤回节点。")
			}
			$.table.refresh();
			$.modal.closeLoading();
		},
		error: function(){
			$.modal.closeLoading();
		}
	})
}

/* 查看审批历史 */
function showHistoryDialog(instanceId) {
	var url = ctx + 'act/processTask/goHisTasks/' + instanceId;
	$.modal.open("查看审批历史", url, null, null, null, true);
}

function showProcessImgDialog(instanceId) {
	var url = ctx + 'act/processTask/processImg/' + instanceId;
	$.modal.open("查看流程图", url, null, null, null, true);
}
</script>
</body>
</html>